<script setup lang="ts">
import { useIntervalFn } from "@vueuse/core";
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
  aiCenterImg
  // aiCircleRedImg,
  // aiCircleBlueImg,
  // aiLijieImg,
  // aiYihuoImg,
} from "./imgBase64";
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions
} from "@pureadmin/utils";

defineProps({
  width: {
    type: String as PropType<string>,
    default: "100%"
  },
  height: {
    type: String as PropType<string>,
    default: "250px"
  }
});

const { isDark } = useDark();

const theme: EchartOptions["theme"] = computed(() => {
  // return isDark.value ? "dark" : "default";
  return "dark";
});

const top5IpChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, getInstance, resize } = useECharts(
  top5IpChartRef as Ref<HTMLDivElement>,
  { theme }
);

setTimeout(() => {
  initChart();
}, 500);

const initChart = () => {
  const chartScatter = getInstance();
  const data = [
    {
      fixed: true,
      x: chartScatter.getWidth() / 2,
      y: chartScatter.getHeight() / 2,
      name: "111.23.14.17",
      value: 9,
      label: {
        show: true,
        // position: [45, 20],
        color: "#fff",
        fontWeight: 800,
        fontSize: 20
      },
      symbolSize: 150,
      itemStyle: {
        color: "#ff0000",
        // shadowColor: "rgba(255, 255, 255, 0.7)",
        shadowColor: "#d14c4c",
        shadowBlur: 15
      }
    },
    {
      name: "111.23.14.104",
      value: 8,
      label: {
        show: true,
        // position: "top",
        // color: "rgba(241,241,241,0.4)",
        fontWeight: 800,
        fontSize: 12
      },
      symbolSize: 130,
      itemStyle: {
        color: "#d14c4c",
        // shadowColor: "rgba(255, 255, 255, 0.7)",
        shadowColor: "#d14c4c",
        shadowBlur: 15
      }
    },
    {
      name: "111.23.14.244",
      value: 4,
      label: {
        show: true,
        // position: "top",
        // color: "rgba(241,241,241,0.4)",
        fontWeight: 800,
        fontSize: 12
      },
      symbolSize: 110,
      itemStyle: {
        color: "#d14c4c",
        // shadowColor: "rgba(255, 255, 255, 0.7)",
        shadowColor: "#d14c4c",
        shadowBlur: 15
      }
    },
    {
      name: "111.23.14.187",
      value: 3,
      label: {
        show: true,
        // position: "top",
        // color: "rgba(241,241,241,0.4)",
        fontWeight: 800,
        fontSize: 12
      },
      symbolSize: 100,
      itemStyle: {
        color: "#ffa500",
        // shadowColor: "rgba(255, 255, 255, 0.7)",
        shadowColor: "#d14c4c",
        shadowBlur: 15
      }
    },
    {
      name: "111.23.14.96",
      value: 2,
      label: {
        show: true,
        // position: "top",
        // color: "#f1f1f1",
        fontWeight: 800,
        fontSize: 12
      },
      symbolSize: 90,
      itemStyle: {
        color: "#ecbe67",
        // shadowColor: "rgba(255, 255, 255, 0.7)",
        shadowColor: "#d14c4c",
        shadowBlur: 15
      }
    }
  ];
  setOptions({
    title: {
      text: "脆弱性资产 TOP5",
      left: 10, // 设置标题的位置
      top: 10,
      textStyle: {
        color: "#459BE8" // 设置标题的颜色
      }
      // textStyle: {
      //   color: "#2fdbbb",
      //   fontSize: 15,
      //   fontWeight: "normal"
      // }
    },
    tooltip: {},
    series: [
      {
        type: "graph",
        layout: "force",
        // 'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。
        // 'circular' 采用环形布局，见示例 Les Miserables，布局相关的配置项见 graph.circular
        // 'force' 采用力引导布局，见示例 Force，布局相关的配置项见 graph.force
        animation: false,
        data,
        force: {
          // initLayout: 'circular'
          // gravity: 0
          // 节点之间的斥力因子。
          repulsion: 700 // 300
          // edgeLength: 10	// 边的两个节点之间的距离，这个距离也会受 repulsion
        }
      }
    ]
  });
};

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
  }
);
</script>

<template>
  <div ref="top5IpChartRef" :style="{ height, width }" />
</template>
